/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
 .hidden {
   display: none;
 }

 .highlight {
   background-color: #eee;
   font-size: 1.2em;
   margin: 0 0 30px 0;
   padding: 0.2em 1.5em;
 }

 .warning {
   color: red;
   font-weight: 400;
 }

 @media screen and (min-width: 1000px) {
   /* hack! to detect non-touch devices */
   div#links a {
     line-height: 0.8em;
   }
 }

 audio {
   max-width: 100%;
 }

 body {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   margin: 0;
   padding: 1em;
   word-break: break-word;
 }

 button {
   background-color: #d84a38;
   border: none;
   border-radius: 2px;
   color: white;
   font-family: 'Roboto', sans-serif;
   font-size: 0.8em;
   margin: 0 0 1em 0;
   padding: 0.5em 0.7em 0.6em 0.7em;
 }

 button:active {
   background-color: #cf402f;
 }

 button:hover {
   background-color: #cf402f;
 }

 button[disabled] {
   color: #ccc;
 }

 button[disabled]:hover {
   background-color: #d84a38;
 }

 canvas {
   background-color: #ccc;
   max-width: 100%;
   width: 100%;
 }

 code {
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
 }

 div#container {
   margin: 0 auto 0 auto;
   max-width: 60em;
   padding: 1em 1.5em 1.3em 1.5em;
 }

 div#links {
   padding: 0.5em 0 0 0;
 }

 h1 {
   border-bottom: 1px solid #ccc;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   margin: 0 0 0.8em 0;
   padding: 0 0 0.2em 0;
 }

 h2 {
   color: #444;
   font-weight: 500;
 }

 h3 {
   border-top: 1px solid #eee;
   color: #666;
   font-weight: 500;
   margin: 10px 0 10px 0;
   white-space: nowrap;
 }

 li {
   margin: 0 0 0.4em 0;
 }

 html {
   /* avoid annoying page width change
   when moving from the home page */
   overflow-y: scroll;
 }

 img {
   border: none;
   max-width: 100%;
 }

 input[type=radio] {
   position: relative;
   top: -1px;
 }

 p {
   color: #444;
   font-weight: 300;
 }

 p#data {
   border-top: 1px dotted #666;
   font-family: Courier New, monospace;
   line-height: 1.3em;
   max-height: 1000px;
   overflow-y: auto;
   padding: 1em 0 0 0;
 }

 p.borderBelow {
   border-bottom: 1px solid #aaa;
   padding: 0 0 20px 0;
 }

 section p:last-of-type {
   margin: 0;
 }

 section {
   border-bottom: 1px solid #eee;
   margin: 0 0 30px 0;
   padding: 0 0 20px 0;
 }

 section:last-of-type {
   border-bottom: none;
   padding: 0 0 1em 0;
 }

 select {
   margin: 0 1em 1em 0;
   position: relative;
   top: -1px;
 }

 h1 span {
   white-space: nowrap;
 }

 a {
   color: #6fa8dc;
   font-weight: 300;
   text-decoration: none;
 }

 h1 a {
   font-weight: 300;
   margin: 0 10px 0 0;
   white-space: nowrap;
 }

 a:hover {
   color: #3d85c6;
   text-decoration: underline;
 }

 a#viewSource {
   display: block;
   margin: 1.3em 0 0 0;
   border-top: 1px solid #999;
   padding: 1em 0 0 0;
 }

 div#errorMsg p {
   color: #F00;
 }

 div#links a {
   display: block;
   line-height: 1.3em;
   margin: 0 0 1.5em 0;
 }

 div.outputSelector {
   margin: -1.3em 0 2em 0;
 }

 p.description {
   margin: 0 0 0.5em 0;
 }

 strong {
   font-weight: 500;
 }

 textarea {
   resize: none;
   font-family: 'Roboto', sans-serif;
 }

 video {
   background: #222;
   margin: 0 0 20px 0;
   --width: 100%;
   width: var(--width);
   height: calc(var(--width) * 0.75);
 }

 ul {
   margin: 0 0 0.5em 0;
 }

 @media screen and (max-width: 650px) {
   .highlight {
     font-size: 1em;
     margin: 0 0 20px 0;
     padding: 0.2em 1em;
   }

   h1 {
     font-size: 24px;
   }
 }

 @media screen and (max-width: 550px) {
   button:active {
     background-color: darkRed;
   }

   h1 {
     font-size: 22px;
   }
 }

 @media screen and (max-width: 450px) {
   h1 {
     font-size: 20px;
   }
 }

button {
  margin: 20px 10px 0 0;
  width: 130px;
}
button#gather {
  display: block;
}
section#iceServers input {
  margin: 0 0 10px;
  width: 260px;
}
section#iceConstraints label {
  margin: 0 1em 0 0;
}
section#iceServers label {
  display: inline-block;
  width: 150px;
}

section#iceOptions label {
  display: inline-block;
  width: 200px;
}

select#servers {
  font-size: 1em;
  padding: 5px;
  width: 420px;
}
div#iceTransports span {
  margin: 0 1em 0 0;
}
table#candidates {
  font-size: 0.7em;
  overflow-y: auto;
  text-align: right;
  width: 100%;
}
th {
font-weight: bold;
}
th:nth-child(3),td:nth-child(3) {
  text-align: left
}
th:nth-child(6),td:nth-child(6) {
  text-align: left
}

.gray {
  color: gray
}

#poolValue {
  display: inline-block;
  width: 30px
}

#getUserMediaPermissions {
  display: none;
}

#error-note {
  display: none;
}
